<template>
  <!--  榜单筛选 -->

  <div class="filter-order">
    <div class="order-container order-folder">
      <div class="order-item active" ref="isShow"  @click="toComprehensive">综合榜</div>
      <div class="order-item" ref="isShow" @click="toComprehensive">热练榜</div>
      <div class="order-item" ref="isShow" @click="toComprehensive">新锐榜</div>
      <div class="order-item" ref="isShow" @click="toComprehensive">最新</div>
    </div>
    <div class="filter-btn "> 筛选<svg
        class="icon"
        viewBox="0 0 1026 1024"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2538"
        width="16"
        height="16"
    >
      <path></path>
    </svg>
    </div>


  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "list",
});
</script>

<script setup lang="ts">
import card from "@/components/card/index.vue";
import {ref} from "vue";

const isShow = ref(false)

const toComprehensive = () =>{
  isShow.value = !isShow
}
</script>

<style scoped lang="scss">

.content-width {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.card-list .filter-order {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.order-container {
  padding: 25px 30px;
}

.order-container .order-item {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  color: #7d8090;
  :hover{
    color: #f93684;
  }
}
.order-container .order-item:hover{
  color: #f93684;
}

.text {
  left: 1060px;
}

.order-container .order-item.active {
  color: #f93684;
}

.order-container .order-item+.order-item {
  margin-left: 60px;
}

</style>
